import { App as AntdApp, ConfigProvider, theme } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { RouterProvider } from 'react-router-dom';
import { useStore } from 'zustand';

import AntdGlobal from '@/components/AntdGlobal';
import ErrorBoundary from '@/components/ErrorBoundary/index.tsx';
import { useUserStore } from '@/store';

import router from './router';

const App = () => {
    /* 数据管理--------------------------------------------------- */
    const isDark = useStore(useUserStore, (state) => state.isDark);

    return (
        <ConfigProvider
            locale={zhCN}
            theme={{
                // 修改主题变量
                token: {
                    colorPrimary: '#ed6c00'
                },
                // 主题算法配置
                algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm
            }}
        >
            {/* 
                提供可消费 React context 的 message、modal、notification等静态方法,
                在react组件中,简化 useMessage 等方法需要手动植入 contextHolder 的问题。
                使用方式: import { App } from 'antd'; const { message, modal, notification } = App.useApp();
             */}
            <AntdApp>
                {/* 
                    初始化加载,实例化message, notification, notification等静态方法，
                    以便在非react组件场景直接使用，例如request.ts中引入使用 
                    使用方式: import { message } from '@/components/AntdGlobal';
                */}
                <AntdGlobal />
                <ErrorBoundary>
                    <RouterProvider router={router} />
                </ErrorBoundary>
            </AntdApp>
        </ConfigProvider>
    );
};

export default App;
